import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import Home from '@/views/Home.vue';
import Layout from '@/components/Layout.vue';
import FrameIn from '@/router/frameIn';
import FrameOut from '@/router/frameOut';
import store from '@/store/index'; // 在非组件的文件当中可以直接 import store来使用
import { showMsg } from '@/util/toast';
// routes 就是我们的路由配置
const routes: Array<RouteRecordRaw> = [
  {
    name: 'home',
    path: '/',
    component: Layout,
    redirect: '/index', // 重定向
    children: FrameIn,
  },
  //  不在layout里面显示的页面都放在FrameOut当中
  // 登录注册等的独立页面
  ...FrameOut,
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 路由守卫
// 全局前置守卫
router.beforeEach((after, before) => {
  console.log('store', store.state);
  const { path } = after; // path就是要跳转的页面的链接
  if (path === '/index' || path === '/login' || path === '/uploadimg') return true;

  const accessToken = window.localStorage.getItem('accessToken');
  if (!accessToken) {
    showMsg('请先登录');
    return { name: 'login' };
  }
  // 判断要去的页面是否在你能访问的菜单当中
  const canEnter = store.state.menu.find((item) => item.url === path);
  if (canEnter) return true;
  return false;
});

// 全局后置守卫
router.afterEach((to, from) => {
  // 后置守卫是没有守卫能力的，一般在这个位置我们进行的是 统计埋点
  console.log('to', to);
  console.log('from', from);
});

export default router;
